This document discusses web apps versus native apps for iPhone and other mobile platforms. It covers key differences like programming languages used, app distribution methods, and costs. It also explores using HTML5 to build web apps that work across different mobile platforms without needing separate native apps. Finally, it provides tips for optimizing web apps for iPhone, including viewport settings, touch icons, and using libraries like jQTouch to create an iPhone-like user interface.

1. Web Apps
2010.08.18

2. Web App vs Native App
• Web App ?
web app
web app iTunes App Store
Object-C
• Native App ?
Object-C
iTunes App Store

3. Web App vs Native App
Web App Native App
HTML, CSS, Javascript Objective-C(iPhone), Java(Android)
XCode(iPhone), Eclipse(Android)
, iUI, jQTouch... Cocoa Touch(iPhone), UI Framework(Android)
Mac Mac (iPhone), Android
App $99(iPhone) or $35(Android)
- / ...
App Store/Market / &
(iPhone)
Android/Blackberry

4. HTML5 ?
•
iPhone, Android
HTML5
WebKit
•
iOS, Android, Blackberry, , Windows
Mobile, Windows Phone 7

5. HTML5 ?

6. HTML5 ?

7. HTML5 ?
• Even Google was not rich enough to support all of the different mobile
platforms from Apple’s AppStore to those of the BlackBerry, Windows
Mobile, Android and the many variations of the Nokia platform
- Vic Gundotra, Google Engineering VP
• 2010년 6월 24일에 공지된 행정안전부 고시 “제 2010-40호”
국민들이 다양한 모바일 기기를 사용할 수 있도록 ‘모바일 앱(App)’ 방
식보다 ‘모바일 웹(Web)‘ 방식을 표준으로 권고
모바일 웹 방식 서비스 개발을 위한 기술 표준지침 마련
3

8. HTML5 Key Elements for Mobile
• Offline : LocalStorage, Web Database,
App Cache
• : Video, Audio, Cnavas
• : Advanced Forms
• : GeoLocation

9. HTML5 on Mobile
• HTML5
•
• Moblie HTML5
•

11. HTML5 = HTML + CSS3 + JS API

12. JS API
• Client Side Storage
- Web SQL Database
- App Cache (cache-manifest)
- Web Storage (localStorage, sessionStorage)
• Communication
- Web Sockets
- Web Workers
• Desktop experience
- Notifications
- Drag & Drop API
• Geolocation

13. HTML
• Semantics (New tags, Link Relations,
Microdata)
• Accessibility (ARIA roles)
• Web Forms 2.0 (Input Fields)
• Multimedia (Audio Tag,Video Tag)
• 2D & 3D drawing (Canvas, WebGL, SVG)

14. CSS
• Typography
• Visuals
• Transitions, Transforms & Animations

15. iPhone Web App
• iPhone
- App Store
- App + Web Hybrid
- iPad Web App
- DashCode
• Safari
-
Add to Home Screen

16. Web App
• Online Web Application
• Offline Enabled Web Application

17. Web App
• Offline Web Application
• Hybrid Web Application

18. Web Apps On iPhone

19. iPhone Web App 1
• css
<link rel=”stylesheet” type=”text/css” href=”iphone.css” media=”only
screen and (max-width: 480px)” />
<link rel=”stylesheet” type=”text/css” href=”desktop.css” media=”screen
and (min-width: 481px)” />
• User Agent
Mozilla/5.0 (iPad; U CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML,
like Gecko) Version 3.0 Mobile/4A93 Safari/419.3
Mozilla/5.0 (iPhone; U CPU like Mac OS X; en) AppleWebKit/420+
(KHTML, like Gecko) Version 3.0 Mobile/1A543 Safari/419.3
Mozilla/5.0 (iPod; U CPU OS 3_2 like Mac OS X; en) AppleWebKit/
531.21.10 (KHTML, like Gecko) Version 4.0.4 Mobile/7B334B Safari/531.21
javascript : if((navigator.userAgent.match(/iPhone/i)) {}
php : if(strpos($_SERVER[‘HTTP_USER_AGENT’], ‘iPod’) !== false) {}

20. iPhone Web App 2
• iPhone Browser & viewport
iPhone : 320 x 480px
Status Bar : 20px
URL Bar : 60px
: 320x356px
Viewport : 980px
<meta name=‘viewport‘
content=‘width=device-width;
initial-scale=1.0;
user-scalable=no’ />
Button Bar : 44px

21. iPhone Web App 3
• Safari UI (URL Bar, Button Bar)
<meta name=”apple-mobile-web-app-capable” content=”yes” />
/
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
*
* URL Bar
window.addEventListener(‘load’, function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
* status-bar-style: default, black, black-translucent( )
* UI Fullscreen
if (navigator.standalone) {
alert(‘ ’);
}

22. iPhone Web App 4
• (57x57)
<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />
<link rel=”apple-touch-icon” href=”apple-touch-icon-precomposed.png” />
• Startup
<link rel=”apple-touch-startup-image” href=”/startup.png” />
* Home

23. iPhone Web App 5
• Orientation
function checkOrientation() {
switch (window.orientation) {
case 0: alert(‘Orientation: Portrait’); break;
case 90:
case -90: alert(‘Orientation: Landscape’); break;
}
}
• Online
function checkOnline() {
if (navigator.onLine) {
alert(‘There is a network connection’);
else {
alert(‘There is no network connection’);
}
}

24. iPhone Web App 6

25. iPhone Web App 6

26. iPhone Web App 6

27. iPhone Web App 6

28. iPhone Web App 6

29. iPhone Web App 7
• iPhone style UI library
* jQTouch - http://jqtouch.com
* iUI - http://iui-js.org
* WebApp.Net - http://webapp-net.com

30. iPhone Web App 8
•
<style type=”text/css” media=”screen”>@import “jqtouch.min.css”;</style>
<style type=”text/css” media=”screen”>@import “themes/apple/
theme.min.css”;</style>
<script src=”jquery.1.3.2.min.js” type=”text/javascript” charset=”utf-8”></
sript>
<script src=”jqtouch.min.js” type=”text/javascript” charset=”utf-8”></
script>
<script type=”text/javascript”>
var jQT = $.jQTouch({
icon: ‘icon.png’,
statusBar: ‘black’
});
</script>

31. iPhone Web App 9
• View
<div id=”home”>
<div class=”toolbar”>
<h1>CPCGUARD</h1>
</div>
<ul>
<li class=”arrow”><a href=”#content”>CPCGUARD </a></li>
<li class=”arrow”><a href=”#content”>S-POPUP</a></li>
<li class=”arrow”><a href=”#content”>S-ON</a></li>
</ul>
</div>
<div id=”content”>
<div class=”toolbar”>
<h1>CONTENT</h1>
<a class=”button back” href=”#”>Back</a>
</div>
</div>

32. iPhone Web App 10